<template>
  <div>

    <div id="services2" v-if="guideType==1">
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_quanyi.png" class="banner"/>
      <div class="content">
        <div class="title">
          <h3>权益产品</h3>
          <span>衣食住行、线上购物、户外娱乐</span>
        </div>
        <div class="product">
          <ul class="leftnav">
            <li :class="{navactive: nav==1}" @click="changenav(1)">主流电商</li>
            <li :class="{navactive: nav==2}" @click="changenav(2)">外卖出行</li>
            <li :class="{navactive: nav==3}" @click="changenav(3)">视频会员</li>
            <li :class="{navactive: nav==4}" @click="changenav(4)">聆听盛宴</li>
            <li :class="{navactive: nav==5}" @click="changenav(5)">办公助手</li>

          </ul>
          <div class="productlist">
            <ul v-if="nav==1">
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon1.png" class="banner"/>
                <div>天猫超市</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon2.png" class="banner"/>
                <div>盒马鲜生</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon31.png" class="banner"/>
                <div>家乐福</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon4.png" class="banner"/>
                <div>京东</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon32.png" class="banner"/>
                <div>沃尔玛</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon6.png" class="banner"/>
                <div>肯德基电子券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon35.png" class="banner"/>
                <div>家乐福购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon36.png" class="banner"/>
                <div>华润苏果购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon37.png" class="banner"/>
                <div>麦德龙购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon38.png" class="banner"/>
                <div>孩子王购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon39.png" class="banner"/>
                <div>天虹超市购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon40.png" class="banner"/>
                <div>永辉超市购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon41.png" class="banner"/>
                <div>华润万家购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon42.png" class="banner"/>
                <div>大润发购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon43.png" class="banner"/>
                <div>唯品会购物卡</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon3.png" class="banner"/>
                <div>美团外卖红包电子券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon33.png" class="banner"/>
                <div>苏宁易购</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon30.png" class="banner"/>
                <div>星爸爸代金券</div>
              </li>
            </ul>
            <ul v-else-if="nav==2">
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon9.png" class="banner"/>
                <div>滴滴快车代金券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon10.png" class="banner"/>
                <div>饿了么超级会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon11.png" class="banner"/>
                <div>叮咚买菜绿卡会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon3.png" class="banner"/>
                <div>美团外卖红包电子券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon12.png" class="banner"/>
                <div>瑞祥咖啡饮品券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon13.png" class="banner"/>
                <div>必胜客</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon6.png" class="banner"/>
                <div>肯德基电子券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon30.png" class="banner"/>
                <div>星爸爸代金券</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon7.png" class="banner"/>
                <div>哈根达斯代金券</div>
              </li>
            </ul>
            <ul v-else-if="nav==3">
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon14.png" class="banner"/>
                <div>微云超级会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon15.png" class="banner"/>
                <div>爱奇艺黄金会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon16.png" class="banner"/>
                <div>优酷黄金会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon17.png" class="banner"/>
                <div>芒果TV会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon18.png" class="banner"/>
                <div>爱奇艺黄金会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon19.png" class="banner"/>
                <div>搜狐黄金会员</div>
              </li>
            </ul>
            <ul v-else-if="nav==4">
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon20.png" class="banner"/>
                <div>喜马拉雅巅峰会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon21.png" class="banner"/>
                <div>腾讯QQ音乐豪华绿钻会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon22.png" class="banner"/>
                <div>樊登读书会会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon23.png" class="banner"/>
                <div>蜻蜓FM会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon24.png" class="banner"/>
                <div>新浪微博会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon25.png" class="banner"/>
                <div>酷我音乐会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon34.png" class="banner"/>
                <div>网易云音乐</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon8.png" class="banner"/>
                <div>音乐黑胶会员</div>
              </li>
            </ul>
            <ul v-else-if="nav==5">
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon26.png" class="banner"/>
                <div>百度文库会员</div>
              </li>
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon27.png" class="banner"/>
                <div>百度云盘普通会员</div>
              </li>
              <!--   <li>
                   <img src="@/assets/image/coupon28.png"  class="banner"/>
                   <div>安卓读书币</div>
                 </li>-->
              <li>
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coupon29.png" class="banner"/>
                <div>wps普通会员</div>
              </li>

            </ul>
          </div>


        </div>
        <div class="title">
          <h3>权益说明</h3>
          <span>提高员工幸福感、归属感</span>
        </div>
        <div class="shuoming">
          <div>
            <img src="@/assets/icon/quanyi1.png" class="shuoimg"/>
          </div>
          <div>
            <img src="@/assets/icon/quanyi2.png" class="shuoimg"/>
          </div>
          <div>
            <img src="@/assets/icon/quanyi3.png" class="shuoimg"/>
          </div>
          <div>
            <img src="@/assets/icon/quanyi4.png" class="shuoimg"/>
          </div>
        </div>
        <div class="title">
          <h3>权益优势</h3>
          <span>专业、创新、优秀的数字科技服务提供商</span>
        </div>
        <div class="advantage">
          <ul>
            <li>
              <img src="@/assets/icon/Icon-fuwu.png">
              <span>专注专业专心</span>
              <p>行业专注数字权益10年<br/> 专业的开发运营团队，专心运营数字权益。</p>
            </li>
            <li>
              <img src="@/assets/icon/Icon-shujufengfu.png">
              <span>产品渠道广</span>
              <p>紧随市场需求，开发日益丰富的卡<br/> 券资源。</p>
            </li>
            <li>
              <img src="@/assets/icon/tuandui.png">
              <span>专业运营团队</span>
              <p>专业的运营服务团队<br/> 及时响应需求，无后顾之忧。</p>
            </li>
            <li>
              <img src="@/assets/icon/changjing.png">
              <span>多场景匹配</span>
              <p>多种场景搭载，完美匹配<br/> 所有目标客户</p>
            </li>
          </ul>
        </div>
        <div class="title">
          <h3>合作品牌</h3>
          <span>专业、创新、领军的数字科技服务提供商</span>
        </div>
        <div class="cooper1">
          <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/company2.png">
        </div>

      </div>
      <div class="banner">
        <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/quanyibottom.png" width="100%">
      </div>
    </div>
    <div id="services" v-else-if="guideType==2">
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bannermc1.png" class="banner"/>
      <div class="choose">
        <div class="titletxt" style="padding-top: 3.93rem;">
          <h5>有对比才有选择</h5>
          <span style="margin-top: 0.71rem;">专业的数字化采购服务提供商</span>
        </div>
        <div class="choose-main">
           <div class="choose-main--left">
            <div style="font-size: 2.14rem;font-weight:bold;">
              数字化采购
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-right.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">精准搜索 秒兑换</div>
                  <div style="font-size: 1.21rem;">精准智能商品搜索，秒兑换</div>
                  <div style="font-size: 1.21rem;">商品出库效率高，配送速度快</div>
               </div>
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-right.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">支持回收实用价值高</div>
                  <div style="font-size: 1.21rem;">产品性价比高，具有回收价值</div>
                  <div style="font-size: 1.21rem;">解决每年上十亿礼品卡闲置的问题</div>
               </div>
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-right.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">开票灵活</div>
                  <div style="font-size: 1.21rem;">税优方案及实施方式合规</div>
                  <div style="font-size: 1.21rem;">开票灵活，助力企业减负</div>
               </div>
            </div>
           </div>
           <div class="choose-main--right">
            <div style="font-size: 2.14rem;font-weight: 600;">
              传统商城采购
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-error.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">流程繁琐 效率低</div>
                  <div style="font-size: 1.21rem;">福利形式太单一，个性需求难实现</div>
                  <div style="font-size: 1.21rem;">消费场景太局限，员工选择不灵活</div>
               </div>
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-error.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">积分实用价值低</div>
                  <div style="font-size: 1.21rem;">积分实用价值低</div>
                  <div style="font-size: 1.21rem;">员工满意难提升，关爱感知逐年降</div>
               </div>
            </div>
            <div class="choose-item">
               <div style="margin-right: 1.26rem;">
                <img style="width: 2.71rem; height: 2.71rem;" src="@/assets/icon/choose-error.png" alt="icon"/>
               </div>
               <div class="item-contain">
                  <div style="font-size: 1.71rem;font-weight:bold;">开票不灵活</div>
                  <div style="font-size: 1.21rem;">现有节税方案监管风险大</div>
                  <div style="font-size: 1.21rem">节税方案风险大</div>
               </div>
            </div>
           </div>
        </div>
      </div>
      <div class="content">
        <div class="titletxt">
          <h5>一站式弹性福利</h5>
          <span>解决企业遇到的困境</span>
        </div>
        <div class="demand">
          <ul class="demand-ul">
            <li>
              <img src="@/assets/image/icon1.png" width="100%">
              <div class="demand-txt">
                <span>企业</span>
                <p>
                  一站福利采购，福利发放效率提升<br/>
                  福利预算统筹管理，企业成本降低<br/>
                  福利选择多样化，员工满意度提升<br/>
                </p>
              </div>
            </li>
            <li>
              <img src="@/assets/image/icon2.png" width="100%">
              <div class="demand-txt">
                <span>财务</span>
                <p>
                  紧贴国家法规，合规税务筹划 <br/>
                  合理账目分科，专款专用 <br/>
                  一站福利采购，轻松应对结算难题<br/>
                </p>
              </div>
            </li>
            <li>
              <img src="@/assets/image/icon3.png" width="100%">
              <div class="demand-txt">
                <span>HR</span>
                <p>
                  福利预算一站统筹，数据汇总易汇报 <br/>
                  福利发放全记录，员工价值感受显著提升
                  原生业务兼容，现有系统/供应商无缝对接<br/>
                </p>
              </div>
            </li>
            <li>
              <img src="@/assets/image/icon4.png" width="100%">
              <div class="demand-txt">
                <span>员工</span>
                <p>
                  海量福利消费通路，个性需求全满足 <br/>
                  移动端“给到”平台，专属福利随身行
                  专业售前售后服务，福利体验全升级 <br/>
                </p>
              </div>
            </li>
          </ul>

        </div>
      </div>
      <div class="titletxt">
        <h5>企业福利</h5>
        <span>为企业员工福利、关爱、激励提供一体化解决方案</span>
      </div>
      <div class="fuli">
        <ul>
          <li :class="{activeli: activeli === 1}" @mouseenter="getActive(1)">
            <span>福利主题方案</span>
            <p>根据企业员工福利需求及企业激励关怀政策，定制策划专属福利主题。</p>
          </li>
          <li :class="{activeli: activeli === 2}" @mouseenter="getActive(2)">
            <span>场景化系统开放</span>
            <p>定制福利系统， 主题定制场景化功能，可嵌入APP、微信等。</p>
          </li>
          <li :class="{activeli: activeli === 3}" @mouseenter="getActive(3)">
            <span>线上线下运营</span>
            <p>福利活动线上线下运营支持，助力企业员工福利效果最大化。</p>
          </li>
          <li :class="{activeli: activeli === 4}" @mouseenter="getActive(4)">
            <span>福利商品供应</span>
            <p>福利个性商品、品类丰富、性价比高，仓储物流及银行售后服务等一体化服务。</p>
          </li>
        </ul>
      </div>
      <div class="brandbox">
        <div class="titletxt">
          <h5 style="color: #ffffff">整合全品类国内外知名品牌，汇集全球畅销商品</h5>
          <span style="color: #ffffff">资源覆盖全国，保障高效、稳定交付</span>
        </div>
        <div class="brand_carousel">
          <a-carousel autoplay>
            <div class="brandlist">
              <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/brandimg.png">
            </div>
            <div class="brandlist">
              <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/brandimg2.png">
            </div>
          </a-carousel>
        </div>

      </div>
      <div class="news-center">
        <div class="titletxt" style="margin-bottom: 3.35rem">
          <h5>实物礼品榜</h5>
          <span>海量爆款优质商品</span>
        </div>
        <a-carousel arrows>
          <div
            slot="prevArrow"
            class="custom-slick-arrow1"
            style="left: -6rem;zIndex: 1"
          >
            <a-icon type="left-circle"/>
          </div>
          <div slot="nextArrow"  class="custom-slick-arrow1" style="right: -3rem">
            <a-icon type="right-circle"/>
          </div>
          <div>
            <h3>
              <div class="box">
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin17.png">
                  <div style="width: 26rem;text-align: center">克莉娜橄榄油</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin18.png">
                  <div style="width: 26rem;text-align: center">美心月饼</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin19.png">
                  <div style="width: 26rem;text-align: center">荣盛月饼</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin20.png">
                  <div style="width: 26rem;text-align: center">中粮福临门礼包</div>
                </div>
              </div>
              <div class="box">
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin21.png">
                  <div style="width: 26rem;text-align: center">志高（CHIGO）手持挂烫机</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin22.png">
                  <div style="width: 26rem;text-align: center">小熊（Bear） 电水壶</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin23.png">
                  <div style="width: 26rem;text-align: center">CEOOL 日式电煮锅</div>
                </div>
                <div style="line-height: 5rem">
                  <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/chanpin24.png">
                  <div style="width: 26rem;text-align: center">摩飞便携式榨汁机</div>
                </div>
              </div>
            </h3>
          </div>

        </a-carousel>
      </div>
      <div class="titletxt" style="margin-top: 3rem">
        <h5>节日发放</h5>
        <span>定制化的节日福礼发放</span>
      </div>
      <div class="welfare">
        <p class="introduce">
          年节产品涵盖端午，中秋，新年等传统节日，也提供妇女节，劳动节，儿童节，国庆节，生日福利，夏日福利，客户礼赠等福利及礼赠场景的多种解决方案。多档位套餐可以满足企业员工福利个性化需求，并提供卡券定制、平台定制、礼盒定制、套餐定制等多维度服务支持。</p>
        <div class="content">
          <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/gift1.jpg" width="100%">
          <div class="btnlist">
            <ul class="btn_ul">
              <li>春节</li>
              <li>端午节</li>
              <li>国庆节</li>
              <li>劳动节</li>
              <li>妇女节</li>
            </ul>
            <ul class="btn_ul">
              <li>儿童节</li>
              <li>中秋节</li>
              <li>夏日福利</li>
              <li>生日福利</li>
              <li>祝福礼物</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="titletxt">
        <h5>客户群体</h5>
        <span>为众多知名企业提供员工福利整体解决方案</span>
      </div>
      <div class="cooper">
        <ul>
          <li>
            <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coop1.png">
            <h5>企事业单位</h5>
            <p>数字化福利平台，全程线上操作助企业降本增效</p>
          </li>
          <li>
            <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coop2.png">
            <h5>工会组织</h5>
            <p>福利政策及审批流程便捷透明，满足员工各类福利需求，让员工更感动</p>
          </li>
          <li>
            <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coop3.png">
            <h5>医院</h5>
            <p>丰富福利礼包及个性化商品，让员工幸福感飙升</p>
          </li>
          <li>
            <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/coop4.png">
            <h5>学校</h5>
            <p>场景化福利关爱让员工得到身份认同感，提升凝聚力</p>
          </li>
        </ul>

      </div>
      <div class="experience">
        <div class="titletxt">
          <h5>提高员工的福利体验</h5>
          <span>企业降本增效 员工满意更高</span>
        </div>
        <div class="experiencebox">
          <ul class="experience_ul">
            <li>
              <div class="li1"></div>
              <h5>正品保障</h5>
              <p>高性价比，价格普遍低于市场价</p>
              <div></div>
            </li>
            <li>
              <div class="li2"></div>
              <h5>专业技术支持</h5>
              <p>自有平台/三方平台，轻松对接</p>
              <div></div>
            </li>
            <li>
              <div class="li3"></div>
              <h5>专业福利顾问</h5>
              <p>为您定制专属福利方案</p>
              <div></div>
            </li>
          </ul>
          <ul class="experience_ul">
            <li>
              <div class="li3"></div>
              <h5>专业采购团队</h5>
              <p>专业的采购团队对接优质源头厂家</p>
              <div></div>
            </li>
            <li>
              <div class="li5"></div>
              <h5>专业物流配送</h5>
              <p>专业物流配送，运营售后完善</p>
              <div></div>
            </li>
            <li>
              <div class="li6"></div>
              <h5>专业售后服务</h5>
              <p>一对一客服专属为您服务</p>
              <div></div>
            </li>
          </ul>
        </div>
      </div>

      <div class="team" style="position: relative;width: 100%;">

        <div class="titletxt">
          <h5 style="color: #ffffff">近期中标项目</h5>
        </div>
        <div class="aaa" style="margin-top: 3.3rem">

        </div>
        <div class="swiper-container" style="width: 117rem" v-swiper:mySwiper="swiperOption">
          <div class="swiper-wrapper" >
            <div class="swiper-slide">
              <div class="imgbox">
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/team1.png">
              </div>

              <h5>北京银行南京分行</h5>
              <span>营销宣传用品供应商</span>
              <img src="../assets/icon/teamicon1.png" style="width: 12rem;height: 2.8rem; margin-top: 2.45rem;">

            </div>
            <div class="swiper-slide">
              <div class="imgbox">
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/team2.png">
              </div>

              <h5>徐州市儿童医院</h5>
              <span>日用品供应商入围项目</span>
              <img src="../assets/icon/teamicon2.png" style="width: 14rem;height: 4.7rem; margin-top: 2.45rem;">
            </div>
            <div class="swiper-slide">
              <div class="imgbox">
                <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/team3.png">
              </div>

              <h5>交通银行镇江分行</h5>
              <span>小家电、粮油、日化供应商</span>
              <img src="../assets/icon/teamicon3.png" style="width: 12.2rem;height: 2.8rem; margin-top: 2.45rem;">
            </div>
            <div class="swiper-slide">
              <div class="imgbox">
                <img src="../assets/icon/huaxia1.jpg">
              </div>

              <h5>华夏银行</h5>
              <span>小家电、粮油、日化供应商</span>
              <img src="../assets/icon/huaxialogo.jpg" style="width: 12.2rem;height: 2.8rem; margin-top: 2.45rem;">
            </div>
            <div class="swiper-slide">
              <div class="imgbox">
                <img src="../assets/icon/xianshe1.jpg">
              </div>

              <h5>建设银行</h5>
              <span>小家电、粮油、日化供应商</span>
              <img src="../assets/icon/xianshelogo.jpg" style="width: 12.2rem;height: 2.8rem; margin-top: 2.45rem;">
            </div>
          </div>

        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <div id="service3" v-else-if="guideType==3">
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_taobao.png" class="banner"/>
      <div class="taobao">
        <div class="content_tb">
          <div class="content_tb_img">
            <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/taobao_phone.png">
          </div>

          <div class="taobaotxt">
            <h5>电商自营</h5>
            <p>互联网卡券品牌企业店铺，全平台深入合作（京东、天猫、淘宝、拼多多）</p>
            <p>卡券类目的电商运营销售渠道，拥有从商品管理、店铺运营到<br/>推广售后的完整操作体系。<br/> 店铺自开店以来0差评，回购率高达98%，短时间内做到了行业前列。</p>
            <p>优秀的运营团队｜优质的商品渠道｜可靠的运营服务</p>
            <div class="bottomspan">
              <div>
                <span>30+</span>
                <span>大牌卡券</span>
              </div>
              <div>
                <span>TOP10</span>
                <span>同品类排名</span>
              </div>
              <div>
                <span>3000万+</span>
                <span>月销售量</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="taobaocard">
        <div class="titletxt">
          <h5>产品展示</h5>
          <span>丰富的卡券种类，包括实物商品和虚拟商品两大类</span>
        </div>
        <div class="card">
          <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/taobaocard.png">
        </div>
      </div>
    </div>
    <div id="service4" v-else-if="guideType==4">
      <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_hc.png" class="banner"/>
      <div class="huicai">
        <div class="titletxt" style="margin: 6.2rem auto ">
          <h5>京东慧采一级供应商</h5>
          <span style="text-align: center">江苏铭创，以“全业务支撑”和“场景化驱动”为核心，以“互联网+创新”为发展动力，以高附加值商品供应链和全链路数字化为底座,打造全场景<br/> 全产链、数智化的企业服务平台,是京东慧采全品类入驻供应商。</span>
        </div>
        <div class="supplyChain">
          <div class="supplybox">
            <img src="@/assets/icon/huicai_icon.png">
            <div class="rightChain">
              <div class="redrect">
              </div>
              <p>
                多家企事业单位、大中型企业实行集中采购，必须在指定电商平台<br/>进行商品集采，并开具正规发票。
              </p>
              <div class="modulebox">
                <div style="margin-right: 3.7rem;">
                  <div style="width: 5.2rem;height: 5.2rem;">
                    <img src="@/assets/image/icon_chain1.png" style="width: 4rem;height: 4.3rem">
                  </div>
                  <div style="display: flex;flex-direction: column">
                    <span>资金安全</span>
                    <span>回款及时</span>
                  </div>

                </div>
                <div style="margin-right: 3.7rem;">
                  <div style="width: 6.2rem;height: 6.2rem">
                    <img src="@/assets/image/icon_chain2.png" style="width: 5.1rem;height: 4.7rem">
                  </div>
                  <div style="display: flex;flex-direction: column">
                    <span>全品类商品 </span>
                    <span>支持自有商品合作</span>
                  </div>
                </div>
                <div>
                  <div style="width: 6.2rem;height: 6.2rem">
                    <img src="@/assets/image/icon_chain3.png" style="width: 5.5rem;height:5.2rem">
                  </div>
                  <div style="display: flex;flex-direction: column">
                    <span>享受授信垫资</span>
                    <span>安全合规</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="huicai_tedian">
          <div class="titletxt">
            <h5>慧采特点</h5>
            <span>目前国内最大的数字化采购平台</span>
          </div>
          <ul class="num_ul">
            <li class="item1">
              <div class="num_li">
                <span>覆 盖 广</span>
                <div>Wide Coverage</div>
                <div class="line"></div>
                <ul class="p_div">
                  <li>截止2021年底</li>
                  <li>京东慧采合计政企用户1000万+</li>
                  <li>成为市场采购量大、覆盖较广客户群体</li>
                  <li>的综合型采购管理平台</li>
                </ul>
              </div>
            </li>
            <li class="item2">
              <div class="num_li">
                <span>品 类 全</span>
                <div>All Categories</div>
                <div class="line"></div>
                <ul class="p_div">
                  <li>目前平台合计上架SKU破千万</li>
                  <li>覆盖集办公、耗材、音视频 LED、UPS、</li>
                  <li>食品、防疫等400多个品类</li>
                  <li>同时拥有市面上相对较成熟的供应管理系统</li>
                </ul>
              </div>
            </li>
            <li class="item3">
              <div class="num_li">
                <span>机 会 多</span>
                <div>Many Opportunities</div>
                <div class="line"></div>
                <ul class="p_div">
                  <li>据统计</li>
                  <li>京东慧采板块2021年全年采购,交易额破万亿</li>
                  <li>大一跃成为全国万亿级B端市场</li>
                  <li>并不断突破历史新高</li>
                </ul>
              </div>
            </li>

          </ul>
        </div>
        <div class="fuwu">
          <div class="titletxt">
            <h5>专项服务</h5>
            <span>您只管轻松做业务</span>
          </div>
          <ul class="colorbox">
            <li class="li1">
              <div>
                <div class="colortxt">一站式集采</div>

                <p>满足客户一次性多品类采购<br/> 需求，提高采购效率</p>
              </div>
              <img src="@/assets/icon/fuwu_icon1.png">
            </li>
            <li class="li2">
              <div>
                <div class="colortxt">多维度比价</div>

                <p>多品牌、多产品进行对比<br/> 在普通慧采用户的基础上<br/> 享受性价比更高的<br/> 商品和服务</p>
              </div>
              <img src="@/assets/icon/fuwu_icon2.png">
            </li>
            <li class="li3">
              <div>
                <div class="colortxt">一对一客服</div>

                <p>长期稳定专属客服对接<br/> 点对点售前沟通 <br/> 售后保障</p>
              </div>
              <img src="@/assets/icon/fuwu_icon3.png">
            </li>
            <li class="li4">
              <div>
                <div class="colortxt">定制专属解决方案</div>
                <p>根据需求，提供灵活的<br/> 解决方案</p>
              </div>
              <img src="@/assets/icon/fuwu_icon4.png">

            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="service5" v-else-if="guideType==5">
      <div class="banner">
        <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/banner_scpt.png" class="banner"/>
      </div>

      <div class="content_pt">
        <div class="titletxt" style="margin-top: 6.9rem">
          <h5>场景丰富</h5>
          <span>覆盖多种生活消费场景，满足日常消费需求</span>
        </div>
        <img src="@/assets/icon/pingtai_icon.png" class="pingtai_icon"/>
        <div class="scence">
          <ul class="ul_scence">
            <li>
              <h5>100000<sup>+</sup> 商品SKU</h5>
              <p>海量精选商品</p>
              <img src="../assets/icon/scence_icon1.png" style="width: 18.1rem;height: 9.6rem"/>
            </li>
            <li>
              <h5>院线热门大片</h5>
              <p>全国电影票在线选座</p>
              <img src="../assets/icon/scence_icon2.png" style="width: 18.2rem;height: 11.3rem;"/>
            </li>
            <li>
              <h5>40<sup>+</sup>大品类全覆盖</h5>
              <p>吃喝玩乐 品质生活</p>
              <img src="../assets/icon/scence_icon3.png" style="width: 14rem;height: 9.9rem;"/>
            </li>
            <li>
              <h5>1000<sup>+</sup>品牌供应链</h5>
              <p>主流电商与一线品牌</p>
              <img src="../assets/icon/scence_icon4.png" style="width: 25.6rem;height: 8.7rem;"/>
            </li>

          </ul>

        </div>

      </div>
      <div class="supply_content">
        <div class="titletxt">
          <h5>八大服务优势</h5>
          <span>品类丰富 满足多场景需求</span>
        </div>
        <ul class="supply_ul">
          <li>
            <div class="imgdiv"></div>
            <div class="txt">组合支付</div>

            <div class="line"></div>
            <p>根据业务需求，客户在商城内进行权益兑换，可通过“积分+现金”支付，限定行方借记卡、贷记卡，促进动账。</p>
          </li>
          <li>
            <div class="imgdiv2"></div>
            <div class="txt">供应商管理系统</div>

            <div class="line"></div>
            <p>已实现京东、苏宁、小米有品、网易严选、猫眼等平台API接口对接，同时提供自有供应商管理系统，对各类供应商进行平台化管理。</p>
          </li>
          <li>
            <div class="imgdiv3"></div>
            <div class="txt">定制商城页面</div>

            <div class="line"></div>
            <p>全界面专属定制设计 全年营销节点运营 专题选择/自由组合/支持个性化。</p>
          </li>
          <li>
            <div class="imgdiv4"></div>
            <div class="txt">优质供应链整合</div>

            <div class="line"></div>
            <p>优选京东、苏宁、齐心、小米有品、网易严选等电商及品牌厂家直供商品百万SKU，以及洗车卡、生日蛋糕、猫眼电影、饿了么等丰富虚拟卡券。</p>
          </li>
        </ul>
        <ul class="supply_ul">
          <li>
            <div class="imgdiv5"></div>
            <div class="txt">对接方式灵活便捷</div>

            <div class="line"></div>
            <p>支持H5页面、APP接口、白名单、数据导入等多种对接方式，拓展性强。</p>
          </li>
          <li>
            <div class="imgdiv6"></div>
            <div class="txt">商品自主选择</div>

            <div class="line"></div>
            <p>对接平台API接口 10万+商品直接上架 品牌授权，质量保障 价格掌控，自行设置。</p>
          </li>
          <li>
            <div class="imgdiv7"></div>
            <div class="txt">多层级业务管理</div>

            <div class="line"></div>
            <p>可按照“分行-支行-客户经理”等进行预算管理，做到管理透明化，数据清晰化，有效支持营销和业务考核。</p>
          </li>
          <li>
            <div class="imgdiv8"></div>
            <div class="txt">数据统计清晰</div>
            <div class="line"></div>
            <p>实时管理数据后台 兑换记录、订单相关信息等 流量数据/行为数据等各类数据分析报表。</p>
          </li>
        </ul>
      </div>
      <div class="help">
        <div class="titletxt">
          <h5>解决多方痛点</h5>
          <span>帮助企业降本增效</span>
        </div>
        <ul class="programme_ul">
          <li>
            <span>数字化、透明化</span>
            <div class="line"></div>
            <p>发放详情记录在案,一键获取数据并追踪效果。
            <p style="opacity: 0">lalallalalalalallalallllllllllllllllallalallallalala</p></p>
          </li>
          <li>
            <span>商品丰富、自选性高</span>
            <div class="line"></div>
            <p>与主流电商平台深度合作,10万款+⾃营商品直接入库备选,上万30%以上利润商品;企业已有供应商,皆可通过后台上架到商城产品库。</p>
          </li>
          <li>
            <span>无需仓储管理</span>
            <div class="line"></div>
            <p>直接消灭库存压力,先赚钱,再备货,囤货积压不存在！全国品牌仓联动发货,全程无接触配送,直接发货到家。</p>
          </li>
          <li>
            <span>统一售后服务</span>
            <div class="line"></div>
            <p>配备一对一售后客服,无需担忧售后问题。
            <p style="opacity: 0">lalallalalalalallalallllllllllllllllallalallallalala</p></p>
          </li>
        </ul>
      </div>
    </div>
  <!-- 鲸禧卡页面 -->
    <div id="service6" v-else>
      <div class="banner">
        <img src="@/assets/image/mcBanner.png" class="banner"/>
      </div>
      <!-- 鲸禧卡介绍 -->
      <!-- <div class="mcTitle">
          <h2>鲸禧卡</h2>
          <div class="mcInfo">
            <span>“鲸禧卡”是在数字福利浪潮下持续创新，为企业客户提供数字化采购方案。其优势是：具有全国通用，无跨地域使用限制，可开发票，单卡面值可定制，有效期长，领用灵活，安全可靠等特点，更适合统一采购管理，自推出以来就备受企业用户的青睐。鲸禧卡赋予员工自由选择福利之权，为员工打造灵活、高效、用心的福利体验，助力企业打造数字福利发放新模式。</span>
            <img style="width: 36.86rem;height: 18.29rem;" src="@/assets/image/mcCard2.png" alt="">
          </div>
      </div> -->

      <!-- 福利体系 -->
      <div class="fuLiTiXi">
        <h2>为您打造多元灵活的福利体系</h2>
        <span class="fuLiTitleFu">专业的数字化采购服务提供商</span>
        <div class="TiXiInfo">
          <div class="TiXiText">
            <p>01 品牌卡券在线兑换，消费使用畅通无阻：</p>
            <span>
              覆盖全国多省市大型商圈和线上购物平台，众多商户一卡兑换(沃尔玛、盒马鲜生、大润发、永辉超市、京东、百果园、天猫超市、唯品会、肯德基、必胜客、85度C等)。
            </span>
            <p>02 在线充值积分消费， 使用便捷安全：</p>
            <span>
              空中充值，无接触福利发放，企业提供员工手机号，铭创进行固定账户充值，员工通过提供的手机号登陆领取。
            </span>
            <p>03 支持个性化定制：</p>
            <span>
              可根据需求订制具有企事业单位特色的卡样，按照合同约定进行积分充值，开发企事业单位专享数字化福利平台。
            </span>
            <p>04 三秒即兑</p>
            <span>
              从复制卡号卡密到绑定兑换只需三秒，极速便捷。
            </span>
          </div>
          <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/fuliBanner.png" alt="">
        </div>
      </div>

      <!-- 核心优势 -->
      <div class="heXin">
        <h2>核心优势</h2>
        <span>专业的数字化采购服务提供商</span>
        <div class="heBanner">
          <img class="num1" src="@/assets/icon/JX01.png" alt="">
          <div class="JXinfo">
            <h2>可个性化定制</h2>
            <span style="font-weight: 400;">个性化定制，实力彰显企业文化</span>
            <div style="background: linear-gradient(to right, #E53223, #EEEEEE);height: 0.15rem;width: 32.07rem;margin: 1rem 0 ;"></div>
            <div>
              <img style="height: 1.57rem;vertical-align: middle;" src="@/assets/icon/JXhexin.png" alt="">
              <span style="font-weight: 600;font-size: 1.4rem;">企业个性定制，提升专属感</span>
              <p style="margin: 0.3rem 0 0.5rem 3rem;font-size: 1.29rem;line-height: 2rem;color: #1e1d1d;">可为企业专属设计卡样，增强员工归属感和仪式感<br>支持个性化设计企业福利宣导展示，强化员工福利感知度</p>
            </div>
            <div>
              <img style="height: 1.57rem;vertical-align: sub;" src="@/assets/icon/JXhexin.png" alt="">
              <span style="font-weight: 600;font-size: 1.4rem;">支持企业量身定制福利产品</span>
              <p style="margin: 0.3rem 0 0.5rem 3rem;font-size: 1.29rem;line-height: 2rem;color: #1e1d1d;">为企业灵活搭配福利品类、量身定制福利方案，满足员工多元化需求，有利于吸引优秀人才、留住核心人才，助力企业控制福利成本，有效平衡企业管理与员工满意度</p>
            </div>
          </div>
          <img style="width: 38.01rem;margin-top: 7.86rem;" src="@/assets/image/JXhexin.png" alt="">
        </div>
      </div>

      <!-- 福利场景 -->
      <div class="changJ">
        <img src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchangJ.png" style="width: 41.93rem;height: 26.71rem;margin: 9.36rem 1.43rem 0 0;">
        <div class="changJinfo">
          <div style="padding-left: 0.57rem;">
            <span style="font-weight: 600;font-size: 1.71rem;color: #1e1d1d;">福利场景全覆盖，员工自选满意度高</span>
            <p style="font-size: 1.36rem;margin-top: 1rem;color: #1e1d1d;">涵盖“衣食住行”全场景，工作生活更无忧</p>
            <div style="background: linear-gradient(to right, #E53223, #EEEEEE);height: 0.15rem;width: 32.07rem;margin: 1.5rem 0 ;"></div>
          </div>
          <div class="changJtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>平台商品库汇集100+知名品牌，涵盖100万+甄选商品，100%正品低价保障，直连京东等主流电商，客服7x24小时在线</span>
          </div>
          <div class="changJtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>100+权益产品涵盖美食饮品、影音娱乐、购物、机酒出行、生活服务、知识阅读、运动健康、充值缴费、实物商品等，品类齐全</span>
          </div>
          <div class="changJtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>合规化定制商品品类</span>
          </div>
        </div>
        <img class="num2" src="@/assets/icon/JX02.png" alt="">
      </div>

      <!-- 充值方式 -->
      <div class="chongZhi">
        <img class="num3" src="@/assets/icon/JX03.png" alt="">
        <div class="chongZinfo">
          <span style="font-weight: 600;font-size: 1.4rem;color: #1e1d1d;">多种充值方式</span>
          <p style="margin: 1rem 0 0.5rem 0;font-size: 1.29rem;line-height: 2rem;color: #1e1d1d;">空中充值，无接触福利发放，高效便捷</p>
          <div style="background: linear-gradient(to right, #E53223, #EEEEEE);height: 0.15rem;width: 32.07rem;margin: 1.5rem 0 ;"></div>
          <div>
            <img style="height: 1.57rem;vertical-align: sub;" src="@/assets/icon/JXhexin.png" alt="">
            <span style="font-weight: 600;font-size: 1.4rem;color: #1e1d1d;">员工福利发放</span>
            <p style="margin: 1rem 0 2rem 2.5rem;font-size: 1.29rem;line-height: 2rem;color: #1e1d1d;">个人账号充值，企业提供员工手机号，铭创进行固定账户充值，员工通过提供的手机号登陆领取</p>
          </div>
          <div>
            <img style="height: 1.57rem;vertical-align: sub;" src="@/assets/icon/JXhexin.png" alt="">
            <span style="font-weight: 600;font-size: 1.4rem;color: #1e1d1d;">支持员工自定义，界面使用更友好</span>
          </div>
        </div>
        <img src="@/assets/image/JXchongzhi.png" alt="" style="width: 46.78rem;height: 35.43rem;margin-top: 2.14rem;">
      </div>

      <!-- 采购方案 -->
      <div class="caiGou">
        <img src="@/assets/image/JXcaigou.png" alt="" style="width: 41.94rem;height: 34.29rem;margin-top: 2.21rem;">
        <div class="caiGinfo">
          <div style="padding-left: 0.57rem;">
            <span style="font-weight: 600;font-size: 1.4rem;color: #1e1d1d;">数字化采购方案</span>
            <p style="margin: 1rem 0 0.5rem 0;font-size: 1.29rem;line-height: 2rem;color: #1e1d1d;">员工福利满意无投诉</p>
            <div style="background: linear-gradient(to right, #E53223, #EEEEEE);height: 0.15rem;width: 32.07rem;margin: 1.5rem 0 ;"></div>
          </div>
          <div class="caiGtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>为企事业单位提供优秀数字化采购方案</span>
          </div>
          <div class="caiGtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>为您送礼提供选择</span>
          </div>
          <div class="caiGtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>为发福利提供全流程解决方案</span>
          </div>
          <div class="caiGtext">
            <img src="@/assets/icon/JXchangJicon.png" alt="">
            <span>为企业解决开票难题</span>
          </div>
        </div>
        <img class="num4" src="@/assets/icon/JX04.png" alt="">
      </div>

      <!-- 产品特色 -->
      <div class="chanPing">
        <h2>产品特色</h2>
        <span>专业的数字化采购服务提供商</span>
        <div class="chanPbanner">
          <div class="chanPcard1">
            <img class="chanPImg" src="@/assets/icon/JXchanping1.png" alt="">
            <p class="chanPText">员工全满意，领导有面子</p>
            <div style="background: linear-gradient(to right, #FFEFEF, #EA5514, #EEEEEE);height: 0.15rem;width: 18.07rem;margin: 1rem 0 ;"></div>
            <p class="chanPInfo">深刻理解职工需求，整合各垂直领域优质供应商资源，在合规前提下赋予职工选择权，提高职工福利获得感。</p>
          </div>
          <div class="chanPcard2">
            <img class="chanPImg" src="@/assets/icon/JXchanping2.png" alt="">
            <p class="chanPText">企业省钱</p>
            <div style="background: linear-gradient(to right, #FFEFEF, #EA5514, #EEEEEE);height: 0.15rem;width: 18.07rem;margin: 1rem 0 ;"></div>
            <p class="chanPInfo">深耕工会福利市场十三年，帮助企业在合规前提下显著节约成本支出。按需定制，同时最大程度满足业务需求。</p>
          </div>
          <div class="chanPcard3">
            <img class="chanPImg" src="@/assets/icon/JXchanping3.png" alt="">
            <p class="chanPText">方案合规，灵活开票</p>
            <div style="background: linear-gradient(to right, #FFEFEF, #EA5514, #EEEEEE);height: 0.15rem;width: 18.07rem;margin: 1rem 0 ;"></div>
            <p class="chanPInfo">深入研究相关政策法规，帮助企业解决后顾之忧。</p>
          </div>
        </div>
      </div>

    </div>

    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li class="active">产品与服务</li>
          <li>解决方案</li>
          <li>开放平台</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress"> 南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园</p>

        </div> -->
      </div>
    </div>

    <!-- 客服 -->
    <KeFu></KeFu>
  </div>
</template>

<script>
  import KeFu from '../components/kefu.vue'
  export default {
    name: 'serviece',
    components: {
      KeFu,
    },
    data() {
      return {
        nav: 1,
        activeli: 1,
        guideType: 1,
        swiperOption: {
          slidesPerView: 3,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }

    },
    beforeRouteUpdate(to, from, next) {
      this.guideType = to.query.guideType;
      next()
    },
    mounted() {
      this.guideType = this.$route.query.guideType;
    },
    methods: {
      changenav(index) {
        this.nav = index
      },
      getActive(index) {
        this.activeli = index
      }

    }

  }
</script>
<style scoped lang="scss">
  #services {
    .choose{
      height: 52.86rem;
      background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/choose-bg.png");
      background-size: 100% 100%;
    }
    .choose-main{
      width: 93rem;
      height: 35.71rem;
      padding: 3rem 3.93rem;
      margin: 3rem auto;
      background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/choose-main-bg.png");
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      &--left{
        width: 28.75rem;
        text-align: left;
        color: #ffffff;
      }
      &--right{
        width: 28.75rem;
        color: #2A2A2A;
      }
      .choose-item{
        display: flex;
        margin-top: 1.9rem;
        align-items: center;
        .item-contain{
          flex: 1;
          height: 5.71rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-bottom: 1.14rem;
        }
      }

    }
    .swiper-slide {
      width: 38.7rem;
      height: 54.3rem;
      background: #f6f6f6;
      border-radius: 1rem;
      padding: 2.3rem 2.1rem;
      box-sizing: border-box;

      .imgbox {
        img {
          width: 34.5rem;
          height: 34.3rem;
        }
      }

      h5 {
        font-size: 2rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: left;
        color: #131313;
        line-height: 2.4rem;
        margin-top: 2.1rem;

      }

      span {
        font-size: 1.6rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: left;
        color: #848484;
        line-height: 2.4rem;
        display: block;

      }

    }

    .swiper-slide:hover {
      background: #ffffff;
    }

    .team {
      width: 100%;
      height: 81.4rem;
      background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/teambg.png");
      background-size: 100% 81.4rem;
      background-repeat: no-repeat;
      padding-top: 5.2rem;

    }

    .experience {
      width: 100%;
      height: 73.9rem;
      background: rgba(245, 245, 245, 0.85);
      padding-top: 4.2rem;

      .experiencebox {
        width: 117rem;
        margin: 0 auto;

        .experience_ul {
          display: flex;
          justify-content: space-between;
          margin-top: 2.9rem;

          li {
            width: 38.7rem;
            height: 24.2rem;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .li1 {
              width: 5.1rem;
              height: 6rem;
              background-image: url("../assets/icon/experience_icon1.png");
              background-size: 5.1rem 6rem;
            }

            .li2 {
              width: 5.5rem;
              height: 5.5rem;
              background-image: url("../assets/icon/experience_icon2.png");
              background-size: 5.5rem 5.5rem;
            }

            .li3 {
              width: 5.5rem;
              height: 5.5rem;
              background-image: url("../assets/icon/experience_icon3.png");
              background-size: 5.5rem 5.5rem;
            }

            .li4 {
              width: 7rem;
              height: 7rem;
              background-image: url("../assets/icon/experience_icon4.png");
              background-size: 7rem 7rem;
            }

            .li5 {
              width: 6.5rem;
              height: 6.5rem;
              background-image: url("../assets/icon/experience_icon5.png");
              background-size: 6.5rem 6.5rem;
            }

            .li6 {
              width: 5.9rem;
              height: 5.9rem;
              background-image: url("../assets/icon/experience_icon6.png");
              background-size: 5.9rem 5.9rem;
            }

            h5 {
              font-size: 2rem;
              color: #000000;
              margin: 1.3rem 0 1rem;
            }

            p {
              font-size: 1.6rem;
              line-height: 2.4rem;
              color: #000000;
              margin: 1rem 0 1.7rem 0;
            }

            div {
              width: 6.2rem;
              height: .8rem;
              background: linear-gradient(90deg, rgba(226, 60, 4, 0.35), #fdfdfd);
              border-radius: .4rem;

            }
          }

          li:hover {
            opacity: 0.87;
            background: linear-gradient(90deg, #c4220a 1%, #e53e04 100%);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);

            .li1 {
              background-image: url("../assets/icon/experience_icon11.png");
            }

            .li2 {
              background-image: url("../assets/icon/experience_icon22.png");
            }

            .li3 {
              background-image: url("../assets/icon/experience_icon33.png");
            }

            .li4 {
              background-image: url("../assets/icon/experience_icon44.png");
            }

            .li5 {
              background-image: url("../assets/icon/experience_icon55.png");
            }

            .li6 {
              background-image: url("../assets/icon/experience_icon66.png");
            }

            h5 {
              color: #ffffff;
            }

            p {
              color: #ffffff;
            }
          }
        }
      }
    }

    .brandbox {
      width: 100%;
      height: 62.2rem;
      background: #de3805;
      padding-top: 6.7rem;
      position: relative;

      .brand_carousel {
        width: 102.9rem;
        margin: 3.75rem auto;


      }

      .brandlist {
        width: 102.9rem;
        height: 33.5rem;
        margin: 0 auto;

        img {
          width: 102.9rem;
          height: 33.5rem;
        }

      }

    }

    .box {
      width: 117rem;
      margin: 0 auto;
      display: flex;
      line-height: 13rem;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
      justify-content: space-around;

      img {
        width: 26rem;
      }
    }

    .box div {
      /*width: 25%;*/
      text-align: center;
    }

    .news-center {
      margin: auto;
      width: 126rem;
      padding-top: 3rem;

      .look-more {
        width: 10.29rem;
        height: 3.46rem;
        border: .1rem solid #ffffff;
        border-radius: 2.47rem;
        margin: 4.53rem auto;
        font-size: 1.6rem;
        font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
        font-weight: normal;
        text-align: center;
        color: #ffffff;
        line-height: 3.46rem;

      }


      .news-list {
        display: flex;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
        margin-top: 4.02rem;

        .newitem {
          width: 29.46rem;
          height: 37.76rem;
          background-color: #fff;
          margin: 0 1rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
          font-weight: normal;

          .imgbox {
            width: 29.46rem;
            height: 17.28rem;
            overflow: hidden;

            img {
              width: 29.46rem;
              height: 17.28rem;
              transition: all 0.5s;


            }

            img:hover {
              transform: scale(1.5);
            }
          }


          .news_text {
            padding: 2.88rem 0 0 1.65rem;

            .name {
              font-size: 1.5rem;
              color: #000000;
              line-height: 2rem;
            }

            .time {
              margin: 2rem 0;

              span {
                font-size: 1.2rem;
                color: #747474;


              }
            }

            p {
              width: 26.6rem;
              height: 4rem;
              font-size: 1.2rem;
              color: #747474;
              line-height: 2rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              margin-bottom: 3.7rem;
            }

            .look {
              font-size: 1.2rem;
              color: #3e64ff;
            }

          }

        }


      }

      .more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 6rem auto;
        height: 4rem;
        width: 15.2rem;
        border: 1px solid #CACACA;
        color: #AFAFAF;
        font-size: 1.4rem;

        &:hover {
          color: #3E64FF;
          border: 1px solid #3E64FF;
        }
      }
    }
  }

  .banner {
    width: 100%;
  }

  .content {
    margin: 3.7rem auto 7.1rem;
    width: 117rem;

    .demand {
      margin-top: 4.2rem;
      margin-bottom: 2.4rem;

      .demand-ul {
        display: flex;
        flex-wrap: wrap;

        li {
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 7.6rem;

          img {
            width: 10rem;
            height: 10rem;
            margin-right: 2.5rem;
          }

          .demand-txt {
            span {
              font-size: 1.8rem;
              font-family: PingFangSC, PingFangSC-Medium;
              font-weight: 500;
              color: #000000;
              line-height: 2.5rem;
            }

            p {
              width: 24rem;
              font-size: 1.5rem;
              color: #000000;
              line-height: 2.4rem;
            }
          }
        }
      }
    }

  }

  .fuli {
    width: 100%;
    height: 49.4rem;
    margin-top: 5.3rem;
    background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 49.4rem;
    display: flex;
    align-items: center;

    ul {
      width: 117rem;
      margin: auto;
      display: flex;
      justify-content: space-around;

      li {
        width: 26.9rem;
        height: 25.8rem;
        opacity: 0.67;
        background: #ffffff;
        text-align: center;
        padding-top: 8.8rem;
        opacity: 0.6;

        span {
          font-size: 2rem;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: center;
          color: #000000;
          line-height: 2.8rem;
        }

        p {
          width: 18.8rem;
          height: 6rem;
          font-size: 1.4rem;
          text-align: center;
          color: #000000;
          line-height: 2rem;
          margin: auto;
        }
      }

      .activeli {
        background: #e0251b;
        text-align: center;
        opacity: 1;

        span {
          font-size: 2rem;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: center;
          color: #ffffff;
          line-height: 2.8rem;
        }

        p {
          width: 18.8rem;
          height: 6rem;
          font-size: 1.4rem;
          text-align: center;
          color: #ffffff;
          line-height: 2rem;
          margin: auto;
          margin-top: 1.3rem;
        }
      }
    }
  }

  .titletxt {
    width: 117rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    h5 {
      font-size: 2.4rem;
      color: #000000;
      line-height: 3.1rem;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
      font-weight: 700;
      margin-bottom: .3rem;
    }

    span {
      font-size: 1.4rem;
      color: #666666;
      line-height: 1.9rem;

    }
  }

  .welfare {
    width: 117rem;
    margin: 4rem auto 10.5rem;

    .welfarename {
      font-size: 2.6rem;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #000000;
      line-height: 4.2rem;
      margin-bottom: 1rem;
    }

    .introduce {
      font-size: 1.8rem;
      line-height: 2.5rem;
    }

    .content {
      width: 117rem;
      height: 26.5rem;
      background: #fafafa;
      margin: 4rem auto 5.1rem;
      padding-left: 4.3rem;
      display: flex;
      align-items: center;

      img {
        width: 39.3rem;
        height: 20.7rem;
      }

      .btnlist {
        padding-left: 5rem;

        .btn_ul {
          display: flex;

          li {
            width: 11.2rem;
            height: 4rem;
            border: .1rem solid #d31b1b;
            border-radius: 2.4rem;
            font-size: 1.8rem;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            color: #d31b1b;
            line-height: 4rem;
            margin-right: 1.4rem;
          }
        }

        .btn_ul:first-child {
          margin-bottom: 1.4rem;
        }
      }
    }


  }

  .cooper {
    width: 100%;
    height: 53.3rem;
    background: linear-gradient(180deg, #fff1f1, #ffeded);
    margin-top: 3.3rem;

    ul {
      width: 120rem;
      height: 53.3rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        width: 29.3rem;
        height: 38.5rem;
        background-color: #ffffff;

        img {
          width: 29.3rem;
          height: 24.7rem;
          border-radius: .4rem;
        }

        h5 {
          font-size: 20px;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #000000;
          line-height: 26px;
          margin: 2.1rem 0 1.2rem 2.3rem;
        }

        p {
          width: 26.6rem;
          font-size: 1.6rem;
          text-align: left;
          color: #6e6e6e;
          line-height: 2.2rem;
          padding-left: 2.3rem;
        }
      }
    }
  }

  #services2 {

    .cooper1 {
      width: 117rem;
      height: auto;
      margin: auto;
      margin-top: 3.7rem;

      img {
        width: 117rem;

      }
    }

    .shuoming {
      width: 117rem;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;

      .shuoimg {
        width: 26.9rem;
        height: 16.8rem;
        margin: 3.85rem 0 7.65rem 0;
      }
    }

    .banner {
      width: 100%;
    }

    .content {
      margin: 3.7rem auto 7.1rem;
      width: 117rem;

      .product {
        width: 117rem;
        margin: auto;
        display: flex;
        margin: 3.7rem 0 7.1rem 0;

        .leftnav {
          width: 19.8rem;
          height: 58.6rem;
          background: #f5f5f5;
          margin-right: 7.7rem;

          li {
            width: 19.8rem;
            height: 11.2rem;
            font-size: 2rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
            font-weight: 700;
            text-align: center;
            line-height: 11.2rem;
            background: #f5f5f5;
            color: #000000;

          }

          .navactive {
            background: linear-gradient(180deg, #e63f04, #ac0d0d);
            color: #ffffff;
          }
        }

        .productlist {
          ul {
            width: 90rem;
            height: 60.9rem;
            overflow-y: scroll;
            align-content: flex-start;
            // 以上轮播图
            // width: 88.2rem;
            display: flex;
            flex-wrap: wrap;
            margin: auto;

            li {
              height: 20.3rem;
              // 以上轮播图

              width: 28.4rem;
              margin-right: 1.5rem;

              div {
                font-size: 1.3rem;
                text-align: center;
                color: #000000;
                line-height: 1.7rem;
                margin: .9rem 0 1.7rem 0;
              }
            }

            li:nth-child(3n) {
              margin-right: 0;

              div {
                font-size: 1.3rem;
                text-align: center;
                color: #000000;
                line-height: 1.7rem;
                margin: .9rem 0 1.7rem 0;
              }
            }

          }
        }
      }

      .advantage {
        width: 117rem;
        margin: 4.45rem auto;

        ul {
          width: 117rem;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;

          li {
            display: flex;
            flex-direction: column;
            margin-bottom: 3.2rem;
            justify-content: center;
            align-items: center;

            img {
              width: 5.486rem;
              height: 5.486rem;
              margin-bottom: 1rem;
            }

            span {
              font-size: 2.2rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #181818;
              letter-spacing: 0.22px;
            }

            p {
              width: 26.6rem;
              height: 3.8rem;
              font-size: 1.4rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #848484;
              margin-top: 1.8rem;
              line-height: 2.0rem;
            }
          }

        }
      }
    }


    .title {
      width: 117rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        font-size: 2.4rem;
        color: #000000;
        line-height: 3.1rem;
        font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
        font-weight: 700;

        margin-bottom: .3rem;
      }

      span {
        font-size: 1.6rem;
        color: #000000;
        line-height: 2.1rem;

      }

    }

  }

  #service3 {
    .banner {
      width: 100%;
    }

    .taobao {
      width: 100%;
      height: 71rem;
      background: #fefefe;

      .content_tb {
        width: 117rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
         .content_tb_img{
            width: 59rem;
            height: 64rem;
            img {
              width: 58.7rem;
              height: 39.2rem;
              margin: 12rem -1.5rem;
            }
         }


        .taobaotxt {
          h5 {
            font-size: 2.4rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #d00b17;
            margin-bottom: 1.4rem;
          }

          p {
            width: 48.9rem;
            height: auto;
            font-size: 1.8rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #848484;
            margin-bottom: 2.5rem;
            line-height: 2.4rem;
          }
        }

        .bottomspan {
          display: flex;
          width: 49.9rem;

          div {
            display: flex;
            flex-direction: column;
            margin-right: 4.1rem;

            span:first-child {
              font-size: 2.8rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: center;
              color: #d80c0c;
            }

            span:last-child {
              font-size: 2.8rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: center;
              color: #000000;
              margin-top: 1rem;
            }
          }
        }

      }
    }

    .taobaocard {
      width: 100%;
      height: 55.6rem;
      background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/taobaobg.png");
      background-repeat: no-repeat;
      background-size: 100% 55.6rem;
      padding-top: 2.4rem;

      .card {
        width: 117rem;
        height: auto;
        margin: 3.1rem auto;

        img {
          width: 117rem;
          height: auto;

        }
      }
    }
  }

  #service4 {

    .banner {
      width: 100%;
    }

    .huicai {
      width: 100%;
      background: #ffffff;

      .supplyChain {
        width: 113.4rem;
        margin: 0 auto;
        margin-bottom: 5.8rem;

        .supplybox {
          display: flex;
          align-items: center;

          img {
            width: 53.8rem;
            height: 41.3rem;
          }

          .rightChain {
            width: 67.2rem;
            height: 36.5rem;
            background: #ffffff;
            box-shadow: 0px 3px 11px 0px rgba(230, 230, 230, 0.50);
            margin-left: -8.1rem;
            padding-left: 5.45rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .redrect {
              width: 7.1rem;
              height: .7rem;
              background: #d31b1b;
              border-radius: .4rem;
              margin-bottom: 3.3rem;
            }

            p {
              width: 61.6rem;
              height: 11.3rem;
              font-size: 1.6rem;
              font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
              font-weight: 400;
              text-align: left;
              color: #000000;
              line-height: 2.9rem;
            }

            .modulebox {
              display: flex;

              div {
                display: flex;

                img {
                  height: 5.2rem;
                }

                span {
                  font-size: 1.6rem;
                  font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #000000;
                  line-height: 2.1rem;
                }
              }
            }
          }
        }
      }

      .huicai_tedian {
        width: 100%;
        height: 57.8rem;
        background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/huicaibg.png");
        background-repeat: no-repeat;
        background-size: 100% 57.8rem;
        padding-top: 5.3rem;

        .num_ul {
          width: 120rem;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          margin-top: 3.9rem;


        }

        .num_ul li {
          width: 39rem;
          height: 36rem;
          position: relative;
        }

        .num_ul li:hover .num_li {
          height: 36rem;
          border-radius: 1.5rem;

          .line {
            width: 6.7rem;
            height: 0px;
            border-bottom: .1rem solid #ffffff;
            margin: 1rem 0;
          }

        }

        .num_ul li:hover .num_li .p_div {
          height: 8rem;
          opacity: 1;

        }

        .num_li {
          width: 39rem;
          height: 8.5rem;
          opacity: 0.85;
          background: #e0251b;
          overflow: hidden;
          position: absolute;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          color: #ffffff;
          transition: all 1s cubic-bezier(.4, 0, .2, 1);
          border-bottom-right-radius: 1.5rem;
          border-bottom-left-radius: 1.5rem;

          span {
            font-size: 2.4rem;
          }

          div {
            font-size: 1.4rem;
            margin-top: .5rem;
          }

          .p_div {
            height: 0rem;
            font-size: 1.4rem;
            margin-top: 1.2rem;
            opacity: 0;
            text-align: center;

            li {
              height: 3rem;
            }
          }


        }

        .item1 {
          background: url("../assets/icon/huicai_icon1.png");
          background-size: 39.7rem 36rem;
          height: 36rem;
          border-radius: 1.5rem;
        }

        .item2 {
          background: url("../assets/icon/huicai_icon3.png");
          background-size: 39.7rem 36rem;
          height: 36rem;
          border-radius: 1.5rem;

        }

        .item3 {
          background: url("../assets/icon/huicai_icon2.png");
          background-size: 39.7rem 36rem;
          height: 36rem;
          border-radius: 1.5rem;
        }

      }

      .fuwu {
        width: 100%;
        height: 74.7rem;
        background-color: #ffffff;
        padding-top: 4.3rem;

        .colorbox {
          display: flex;
          justify-content: center;
          margin-top: 3.3rem;

          li {
            width: 30rem;
            height: 51.3rem;
            padding: 6rem 0 5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            transition: all 1s cubic-bezier(.4, 0, .2, 1);
            box-sizing: border-box;
            margin-right: .3rem;

            img {
              width: 27.2rem;
              height: 18.6rem;
              transition: all 1s cubic-bezier(.4, 0, .2, 1);
            }

            .colortxt {
              font-size: 2.4rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Bold;
              font-weight: 700;
              text-align: center;
              color: #ffffff;
            }

            p {
              width: 24.8rem;
              height: 7.5rem;
              font-size: 1.8rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #ffffff;
              margin-top: 2.8rem;
              line-height: 2.3rem;
            }
          }


          .li1 {
            background: #1472FF;
          }

          .li2 {
            background: #4437F4;
          }

          .li3 {
            background: #1DB85B;
          }

          .li4 {
            background: #F52B74;
          }

        }
      }
    }
  }

  #service5 {
    .banner {
      width: 100%;
    }

    .content_pt {
      position: relative;

      .pingtai_icon {
        width: 75.5rem;
        height: 69.4rem;
        position: absolute;
        top: 0;
        left: 15.3rem;
      }

      .scence {
        width: 117rem;
        height: 69.4rem;
        padding-top: 6.9rem;
        position: relative;
        margin: 0 auto;

        .ul_scence {
          width: 64rem;
          display: flex;
          flex-wrap: wrap;
          position: absolute;
          right: 0;

          li {
            width: 30.8rem;
            height: 18.7rem;
            background: #ffffff;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: .4rem;

            h5 {
              font-size: 2.1rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #181818;
            }

            p {
              margin: .7rem 0 1.5rem;
              font-size: 1.2rem;
              font-family: Microsoft YaHei, Microsoft YaHei-Regular;
              font-weight: 400;
              text-align: center;
              color: #848484;
            }

          }
        }
      }
    }

    .supply_content {
      width: 100%;
      height: 97.1rem;
      background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/huicaibannerzp.png");
      background-size: 100% 97.1rem;
      background-repeat: no-repeat;
      padding-top: 6.4rem;
      margin: 0 auto;

      .supply_ul {
        display: flex;
        justify-content: center;
        margin-top: 5.9rem;

        li {
          width: 26.5rem;
          height: 32.4rem;
          background: #ffffff;
          border-radius: 1.5rem;
          padding: 3rem;
          margin-right: .8rem;

          .imgdiv {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon1.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv2 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon2.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv3 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon3.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv4 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon4.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv5 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon5.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv6 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon6.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv7 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon7.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .imgdiv8 {
            width: 3.9rem;
            height: 3.9rem;
            margin-bottom: 1rem;
            background-image: url("../assets/icon/sence_icon8.png");
            background-size: 3.9rem 3.9rem;
            background-repeat: no-repeat;
          }

          .txt {
            font-size: 1.8rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #e0251b;
            letter-spacing: 0.18px;
            margin-bottom: .2rem;
          }

          .line {
            width: 21.1rem;
            height: 0px;
            border-bottom: .1rem solid #848484;
            margin: 2rem 0;
          }

          p {
            width: 21rem;
            font-size: 1.5rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #848484;
            line-height: 2rem;
          }
        }

      }

    }

    .help {
      width: 100%;
      height: 58.4rem;
      background-color: #ffffff;
      padding-top: 8.5rem;

      .programme_ul {
        width: 112.9rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 4.3rem;

        li {
          width: 54.7rem;
          height: 11.8rem;
          background: #ffffff;
          border-radius: 1.4rem;
          box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.16);
          padding-left: 2.3rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-bottom: 3.5rem;

          span {
            display: inline-block;
            font-size: 2rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #181818;
          }

          div {
            width: 46.8rem;
            height: 0px;
            border-bottom: .1rem solid #e0251b;
            margin: .8rem 0 1.3rem 0;
          }

          p {
            width: 48.2rem;
            font-size: 1.4rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 2.1rem;
          }
        }


      }
    }
  }

  #service6 {
    .banner {
      width: 100%;
    }

    .mcTitle {
      padding: 3.64rem 0 0.5rem 29.86rem;

      h2 {
        font-weight: 600;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        margin-bottom: 1.5rem;
        color: #181818;
        line-height: 3rem;
        font-size: 2.14rem;
      }

      .mcInfo {
        display: flex;

        span {
          width: 42.2rem;
          margin-right: 2.1rem;
          font-size: 1.29rem;
          font-family: Microsoft YaHei,Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: justify;
          color: #1e1d1d;
          line-height: 2.21rem;
        }
      }
    }

    .fuLiTiXi {
      padding: 2.9rem 0 0 0;
      background-color: #faf9f9;
      // background-color: pink;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
        font-weight: 600;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 2.14rem;
      }

      .fuLiTitleFu {
        font-weight: 500;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 1.29rem;
        color: #1e1d1d;
        line-height: 3.5rem;
      }

      .TiXiInfo {
        position: relative;
        padding-left: 29.86rem;

        img {
          margin-left: 34rem;
          width: 72rem;
          height: 44rem;
        }

        .TiXiText {
          width: 37.5rem;
          padding-top: 1.5rem;
          position: absolute;
          left: 29.86rem;

          p {
            margin-top: 2rem;
            font-size: 1.5rem;
            font-family: Microsoft YaHei,Microsoft YaHei-Regular;
            font-weight: 600;
            color: #1e1d1d;
            line-height: 2.21rem;
          }

          span {
                font-size: 1.29rem;
                font-family: Microsoft YaHei,Microsoft YaHei-Regular;
                font-weight: 400;
                color: #1e1d1d;
                line-height: 2.21rem;
          }
        }

      }

    }

    .heXin {
      padding: 2.9rem 0 0 0;
      // background-color: skyblue;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2 {
        font-weight: 600;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 2.14rem;
      }

      span {
        font-weight: 500;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 1.29rem;
        color: #1e1d1d;
        line-height: 3.5rem;
      }

      .heBanner {
        width: 100%;
        padding: 0 0 1.64rem 0;
        display: flex;
        justify-content: center;
        // background-color: pink;
        position: relative;

        .num1 {
          width: 9.64rem;
          height: 8.36rem;
          position: absolute;
          left: 59.43rem;
          top: 5rem;
        }

        .JXinfo {
          width: 37rem;
          margin: 10.29rem 7.57rem 0 0;
        }
      }
    }

    .changJ {
      background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchangjing.png');
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      padding-bottom: 1.43rem;
      position: relative;

      .changJinfo {
        width: 40rem;
        margin-top: 11.57rem;

        .changJtext {
          display: flex;

          img {
            width: 1.29rem;
            height: 1.29rem;
            margin: 0.5rem 0.4rem 0 0;
          }

          span {
            font-size: 1.29rem;
            line-height: 2.21rem;
            margin-bottom: 1rem;
            color: #1e1d1d;
          }

        }

      }

      .num2 {
        width: 9.64rem;
        height: 8.36rem;
        position: absolute;
        left: 99rem;
        top: 6rem;
      }

    }

    .chongZhi {
      // background-color: pink;
      display: flex;
      justify-content: center;
      position: relative;

      .chongZinfo {
        margin: 12.14rem 2rem 0 6rem;
        width: 39rem;
      }

      .num3 {
        width: 9.64rem;
        height: 8.36rem;
        position: absolute;
        left: 59rem;
        top: 6rem;
      }
    }

    .caiGou {
      // background-color: pink;
      background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchangjing.png');
      background-repeat: no-repeat;
      background-size: cover;
      padding-bottom: 1rem;
      display: flex;
      justify-content: center;
      position: relative;

      .caiGinfo {
        margin: 12.5rem 0 0 5.2rem;

        img {
          vertical-align: sub;
          width: 1.29rem;
          height: 1.29rem;
        }

        span {
          font-size: 1.29rem;
          line-height: 2.21rem;
          margin-bottom: 1rem;
          color: #1e1d1d;
        }

      }

      .num4 {
        width: 9.64rem;
        height: 8.36rem;
        position: absolute;
        left: 99rem;
        top: 6rem;
      }

    }

    .chanPing {
      padding: 2.9rem 0 8.14rem 0;
      // background-color: skyblue;
      background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchanping.png');
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 0.2rem;

      h2 {
        font-weight: 500;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 2.14rem;
        color: #ffffff;
      }

      span {
        font-weight: 500;
        font-family: Microsoft YaHei,Microsoft YaHei-Regular;
        font-size: 1.29rem;
        color: #ffffff;
        line-height: 3.5rem;
      }

      .chanPbanner {
        padding-top: 4rem;
        display: flex;
        justify-content: center;

        .chanPcard1,.chanPcard2,.chanPcard3 {
          width: 33.79rem;
          height: 18.21rem;
          padding: 1.14rem 1.86rem 0 2rem;
          border-radius: 0.7rem;
          background-color: #ffffff;

          .chanPImg {
            width: 4.86rem;
            height: 4.86rem;
          }

          .chanPText {
            margin-top: 1rem;
            font-weight: 500;
            font-size: 1.57rem;
            color: #1e1d1d;
          }

          .chanPInfo {
            font-size: 1.29rem;
            color: #1e1d1d;
            line-height: 1.79rem;
          }

        }

        .chanPcard1 {
          background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchanping1.png');
          background-repeat: no-repeat;
          background-size: cover;
        }

        .chanPcard2 {
          margin: 0 1.71rem;
          background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchanping2.png');
          background-repeat: no-repeat;
          background-size: cover;
        }

        .chanPcard3 {
          background-image: require('https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/JXchanping3.png');
          background-repeat: no-repeat;
          background-size: cover;
        }

      }
    }

  }

  .footer-top {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 16rem;
    background: linear-gradient(180deg, #e63f04, #ac0d0d);
    color: #fff;

    .licence-code {
      width: 120rem;
      height: 16rem;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .nav {
        display: flex;

        li {
          font-size: 1.6rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 2rem;
          margin-right: 4.1rem;
        }

        .active {
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;

        }
      }

      .about-h55 {
        margin: 0rem 0 1.8rem;
      }

      .licence-h5,
      .QR-code-h5 {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid #fff;
        margin: 2rem 0 1.1rem;
      }

      h5 {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 700;
      }

      p {
        margin-bottom: 0.7rem;
        font-size: 1.4rem;
        line-height: 1.9rem;
      }

    }
  }

  .big_box {
    width: 1500px;
    margin: auto;
  }

  #swiper-history {
    position: relative;
  }

  .cardhover {
    width: 100%;

    transform: all 0.5s;
  }

  .cardhover:hover {
    transform: translate(0, -20px); /* 鼠标悬浮时盒子上移10px */
  }

  .buycard1 {
    width: 344px;
    height: 345px;
  }

  .buycard2 {
    width: 378px;
    height: 369px;
    margin: 0 6px
  }

  .swiper_img {
    width: 358px;
    height: 210px;
    overflow: hidden;
  }

  .swiper_img img {
    width: 358px;
    height: 210px;
  }

  .swiper_xc {
    padding: 35px 22px 0 22px;
  }

  .swiper_xc h4 {
    height: 42px;
  }

  .swiper-button-prev {
    background-image: url("../assets/icon/left_jt.png") !important;
    background-size: 53px;
    height: 53px;
    width: 53px;
    z-index: 999;
  }

  .swiper-button-next {
    background-image: url("../assets/icon/right_jt.png") !important;
    background-size: 53px;
    height: 53px;
    width: 53px;

    z-index: 999;

  }

  ::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
  }

</style>
